
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>login</title>
  <link href="../css/login.css" rel="stylesheet">
</head>

<body>
  <div id="app">
  <div id="loginDiv">
    <form id="form">
      <h1 id="loginMsg">登 录</h1>
      <div id="errorMsg" style="text-align: center;color: red">{{login_msg}}</div>
      <p>Username:<input id="username" name="username" v-model="user.username" type="text"></p>

      <p>Password: <input id="password" name="password" v-model="user.password" type="password"></p>
     <!-- <p>记住我:<input id="remember" name="remember" v-model="user.remember" type="checkbox" style="width: 20px;height: 20px;vertical-align: middle;margin-left: 5px;"></p>-->
      <div id="subDiv">
        <input type="button" class="button" @click="login()" value="登录">
        <input type="reset" class="button" value="重置">&nbsp;
        <a href="../register.jsp" style="text-decoration: none pink">没有账号？点击注册</a>
      </div>
    </form>
  </div>
</div>
</body>

<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        //错误信息
        login_msg:'',
        //登录信息

        user:{
          username:"",
          password:""
        }
      }
    },
    methods:{
      login(){
        var _this=this;
        axios({
          method:"post",
          url:"http://localhost:8080/project123/user/login",
          data:_this.user,
        }).then(function (resp){
          /*该this指的是window对象*/
          if(resp.data=='success'){
            //登陆成功
            window.location.href="../brand.html";
          }
          else{
            _this.login_msg="登录失败，用户名或密码错误";

          }
        })
      },
    }




  })


</script>
</html>
